[React]local Storage를 통한 데이터 유지

count를 localStorage에 저장해볼 것이다. 

클릭을 할 때 마다 노란색 형광펜 친 부분의 숫자가 올라가는데 이걸 local Storage에 담아볼 것이다. 

 

우선 App 컴포넌트에서 localStorage.setItem("counter,nextCounter);를 해준다.

근데  저 MeaningsLand 옆에 숫자는 useState를 이용해서 1 씩 증가하는것을 만들어봤었는데 이걸 local Storage

와 연동해볼 것이다. 

React.useState가 

현재 1로 되어있는데 이걸 React.useState(localStorge.getItem("counter");로 바꿔볼 것이다. 

이렇게 하면 localStorage에 들어있는 counter 수만큼 숫자가 반영되어 새로고침하지 않고 데이터가 유지된다.

 

오 잘 들어간것을 확인할 수 있다. 

다만 주의할 것은 local storage는 값들이 string이기 때문에 새로고침하면 숫자들이 문자열로 연결된다.

새로고침 전에 2번 새로고침하고 1번 submit 했는데 두 숫자가 문자열로 연결돼서 21이 뜬것을 확인할 수 있다.

그래서 nextCounter에서 counter가 더해지는 부분에 Number로 감사쭤야 한다. 

 

 

---

이번에는 새로고침해도 이미지는 그대로 남아있게 해볼 것이다. 이번에도 localStorage를 이용할 것이고,

아까와 다른 점이 있다면 JSON stringify와 JSON parse를 해줘야 한다는 것이다!

 

localStorage에는 숫자,array,bool형 모두 string으로 저장된다는 불편한점이 있다. 

 

jsonLocalStorage를 이용하면 아까 Number로 감싸주던걸 할 필요가 없다.(어차피 parse가 되기 때문!)

 

이렇게 stringify와 parse를 해주는 함수를 상단에 위치시켜두고 

 

이미지를 넣어보자. 

App컴포넌트의 이미지가 저장되어 있는 함수에서 조금 수정을 해볼 것이다. 

jsonLocalStorage.setItem을 통해 localStorage에 이미지 링크를 집어넣는다

 

images useState도 jsonLocalStorage와 연동시킨다.

 

React.useState(jsonLocalStorage.getItem("favorites")) 를 하니까 map은 null이라는 에러가 뜬다.

너무 당연한게 처음에는 localStorage에는 아무것도 없는데

이렇게 map을 통해서 이미지를 띄우려니 에러가 나는것이다. (배열에 아무것도 없는데 배열에 접근하려고 하니까)

 

그래서 빈배열을 넣어주면된다. 

 

|| 표현은 만약 앞에꺼가 없으면 뒤에꺼가 실행된다는 것이다. 

 

localStorage를 보면 배열이 잘 추가된 것을 확인할 수 있다. 

 

계속 버튼을 누르면 똑같은 사진만 추가되는데

blueImg2만 추가시켰기 때문이다.

이 자리에 blueImage를 넣어보겠다.

원래 blueImage에는 초기값이 greenImg이기 때문에 텍스트를 아무것도 입력하지 않고 파란 버튼을 누르면

 

초록색 사진이 추가되는 것을 확인할 수 있다. (원래는 blueImg2만 넣었기에 파란색 이미지만 추가됐다.)

 

만약 텍스트도 입력한다면

오 파란색 이미지도 넣을 수 있게 되었다~!